<template>
	<div>
		<Category :disable="showIndex !== 1" :style="{ marginBottom: '20px' }" />

		<SpuList
			v-if="showIndex === 1"
			@changeShowIndex="changeShowIndex"
		></SpuList>
		<SpuInfo
			@changeShowIndex="changeShowIndex"
			v-else-if="showIndex === 2"
			:spuInfo="spuInfo"
		></SpuInfo>
		<SkuInfo
			v-else
			:spuInfo="spuInfo"
			@changeShowIndex="changeShowIndex"
		></SkuInfo>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { spuInfoItemType } from "@/api/spu";
import { storeToRefs } from "pinia";

export default defineComponent({
	name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import SpuList from "./components/SpuList.vue";
import SpuInfo from "./components/SpuInfo.vue";
import SkuInfo from "./components/SkuInfo.vue";
import useCategoryStore from "@/stores/category";

//得到categorystore对象
const categoryStore = useCategoryStore();

//得到category中的category3Id
const { category3Id } = storeToRefs(categoryStore);

//定义一个数据保存当前的展示的组件
//1:代表SpuList  2：代表SpuInfo  3：代表SkuInfo
const showIndex = ref(1);

//在父组件Spu组件中初始化一个数据 ,把这个传递给子组件SpuInfo
//如果是新增,则传递的就是这个初始化空数据
//如果是修改,则在下边的事件中会把这个spuInfo修改为回填的数据
const spuInfo = ref<spuInfoItemType>({
	category3Id: category3Id.value as number,
	description: "",
	spuName: "",
	tmId: null,
	spuSaleAttrList: [],
	spuImageList: [],
});

//定义一个自定义事件 切换组件
const changeShowIndex = (index: number, row?: spuInfoItemType) => {
	// console.log(index, row, 1111);

	//每次切换的时候重置一下spuInfo的数据
	spuInfo.value = {
		category3Id: category3Id.value as number,
		description: "",
		spuName: "",
		tmId: null,
		spuSaleAttrList: [],
		spuImageList: [],
	};

	//因为初始化数据中无法拿到category3Id,所以在切换页面的时候,可以把3Id给赋值上
	spuInfo.value.category3Id = category3Id.value as number;
	//不管有没有row 都要切换到spuInfo页的
	showIndex.value = index;

	if (row) {
		spuInfo.value = row;
	}
};
</script>

<style scoped lang="scss"></style>
